import { Button, Drawer, Form, Input, Select, Space } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import { useToggle } from 'react-use';
import ContentWrapper from '../../../component/contentWrapper';
import PageTable from '../../../component/pageTable/pageTable';
import IPageInterface from '../../../interface/pageInterface';
import EquipmentEdit from '../edit';
import './index.less'

interface IEquipmentProps {

}

const Equipment: React.FC<IEquipmentProps> = (props) => {
    const [visible, setVisible] = useToggle(false);
    const [editVisible, seteditVisible] = useToggle(false);
    return (
        <ContentWrapper gap={16} >
            <Space>
                <span>设备组名称：</span>
                <Input placeholder="输入设备组名称：" />
                <Button type="primary" >搜索</Button>
                <Button onClick={setVisible} >添加设备组</Button>
            </Space>
            <PageTable
                columns={[
                    {
                        title: "设备组ID",
                        render: () => <div>123456789</div>
                    },
                    {
                        title: "设备组名称",
                        render: () => <div>长城门禁</div>
                    },
                    {
                        title: "设备组密码",
                        render: () => <div>555555</div>
                    },
                    {
                        title: "状态",
                        render: () => <div>启用</div>
                    },
                    {
                        title: "使用人数",
                        render: () => <div>23</div>
                    },
                    {
                        title: "设备数量",
                        render: () => <div>5</div>
                    },
                    {
                        title: "创建人",
                        render: () => <div>张飞</div>
                    },
                    {
                        title: "创建时间",
                        render: () => <div>2017-11-11</div>
                    },
                    {
                        title: "操作",
                        render: () => {
                            return (
                                <div>
                                    <Button type="link" onClick={seteditVisible} >编辑设备</Button>
                                    <Button type="link" >禁用</Button>
                                    <Button type="link" >删除</Button>
                                </div>
                            )
                        }
                    },


                ]}
                func={async (pageNo, pageSize) => {
                    return { total: 20, data: [1, 2, 3, 4, 5] }
                }}
            />
            {
                editVisible &&
                <EquipmentEdit visible={editVisible} onClose={seteditVisible} />
            }
            <Drawer width={400} title="添加设备组" onClose={setVisible} visible={visible}>
                <Form labelCol={{ span: 5 }} wrapperCol={{ offset: 2 }} >
                    <FormItem label="设备组名称" rules={[{ required: true }]} >
                        <Input placeholder="输入设备组名称" maxLength={6} />
                    </FormItem>
                    <FormItem label="设备组密码" rules={[{ required: true }]}>
                        <Input placeholder="输入设备组密码" maxLength={11} />
                    </FormItem>
                    <FormItem label="密码" rules={[{ required: true }]}>
                        <Input placeholder="输入初始密码" maxLength={16} />
                    </FormItem>
                    <FormItem label="状态" >
                        <Select defaultValue="1" >
                            <Select.Option value="1" >正常</Select.Option>
                            <Select.Option value="0" >禁用</Select.Option>
                        </Select>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" style={{ width: "100%" }} >添加</Button>
                    </FormItem>
                </Form>
            </Drawer>
        </ContentWrapper>
    );
}

const EquipmentPage: IPageInterface<IEquipmentProps> = {
    title: "设备组管理",
    path: "/equipment/group",
    // group: "设备管理",
    component: Equipment
}

export default EquipmentPage;